<template>
  <div class="action-icon-container">
    <img :src="getImageUrl(normal)" class="normal-icon" />
    <img :src="getImageUrl(active)" class="active-icon" />
  </div>
</template>

<script lang="ts" setup>
  defineProps({
    normal: { type: String, default: 'back' },
    active: { type: String, default: 'back' },
  });

  function getImageUrl(path: string) {
    return new URL(`../../assets/images/${path}.png`, import.meta.url).href;
  }
</script>

<style lang="less" scoped>
  .action-icon-container {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    .normal-icon {
      display: inline-block;
    }
    .active-icon {
      display: none;
    }
    &:hover {
      .normal-icon {
        display: none;
      }
      .active-icon {
        display: inline-block;
      }
    }
  }
</style>
